<template>
  <div>
    <div>setup函数的使用：组合API的基础</div>
    <div>{{msg}}</div>
    <div>{{info}}</div>
    <div>{{abc}}</div>
    <button @click='handleClick'>点击</button>
  </div>
</template>
<script>
export default {
  name: 'App',
  data () {
    return {
      abc: 'hi'
    }
  },
  setup () {
    // Vue2: 生命周期函数中的this是组件的实例对象
    // setup执行的时机：beforeCreate之前（此时，没有组件实例被创建）
    // Vue3中已经废弃了beforeCreate和created生命周期，setup代替他们
    // console.log(this)
    const msg = 'hello'
    const info = 'nihao'

    // 这就是事件函数
    const handleClick = () => {
      console.log(msg + '---' + info)
    }

    return { msg, info, handleClick }
  }
}
</script>
